<template>
  <div class="app-container">
    <u-page title="发劵记录">
      <u-filtered>

        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="时间范围">
            <u-date-time-picker v-model="searchDate" />
          </el-form-item>
          <el-form-item label="卡号" prop="cardNo">
            <el-input v-model="listQuery.cardNo" placeholder="请输入卡号" clearable />
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="listQuery.mobile" placeholder="请输入手机号" clearable />
          </el-form-item>
          <el-form-item label="OPENID" prop="openid">
            <el-input v-model="listQuery.openid" placeholder="请输入OPENID" clearable />
          </el-form-item>
          <el-form-item label="订单号" prop="orderNo">
            <el-input v-model="listQuery.orderNo" placeholder="请输入订单号" clearable />
          </el-form-item>
          <el-form-item label="券号" prop="couponNo">
            <el-input v-model="listQuery.couponNo" placeholder="请输入券号" clearable />
          </el-form-item>
          <el-form-item label="券名" prop="couponName">
            <el-input v-model="listQuery.couponName" placeholder="优惠券名称" clearable />
          </el-form-item>
          <el-form-item label="发券流水号" prop="tranNo">
            <el-input v-model="listQuery.tranNo" placeholder="请输入发券流水号" clearable />
          </el-form-item>
          <el-form-item label="推送状态">
            <el-select v-model="listQuery.ack" placeholder="请选择推送状态" clearable>
              <el-option label="全部" value="" />
              <el-option label="推送中" value="false" />
              <el-option label="推送成功" value="true" />
            </el-select>
          </el-form-item>
          <el-form-item label="推送类型">
            <el-select v-model="listQuery.type" placeholder="请选择推送类型" clearable>
              <el-option label="全部" value="" />
              <el-option label="手动发放" value="0" />
              <el-option label="扫码领取" value="1" />
              <el-option label="消费领取" value="2" />
              <el-option label="线上活动" value="3" />
              <el-option label="升级权益" value="4" />
              <el-option label="会员权益" value="5" />
            </el-select>
          </el-form-item>
          <el-form-item label="操作人" prop="createdBy">
            <el-input v-model="listQuery.createdBy" placeholder="操作人" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
            <el-button type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
          </el-form-item>
        </el-form>

      </u-filtered>

      <u-table
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :pagination.sync="listQuery"
        :fetch="getList"
      >
        <template v-slot:right>
          <el-table-column label="发放类型" align="center">
            <template slot-scope="{ row }">
              <el-tag v-if="row.type === 0">手动发放</el-tag>
              <el-tag v-if="row.type === 1" type="success">扫码领取</el-tag>
              <el-tag v-if="row.type === 2" type="success">消费领取</el-tag>
              <el-tag v-if="row.type === 3" type="success">线上活动</el-tag>
              <el-tag v-if="row.type === 4" type="success">升级权益</el-tag>
              <el-tag v-if="row.type === 5" type="success">会员权益</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="订单号" align="center" width="220px">
            <template slot-scope="{ row }">
              <el-tag>{{ row.orderNo }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="发券流水号" align="center" width="320px">
            <template slot-scope="{ row }">
              <el-tag v-if="row.tranNo">{{ row.tranNo }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="券号" align="center" width="220px">
            <template slot-scope="{ row }">
              <el-tag v-if="row.couponNo && !row.couponNo.includes(',')">{{ row.couponNo }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="劵名" align="center">
            <template slot-scope="{ row }">
              <span v-if=" row.coupon">{{ row.coupon.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="数量" align="center">
            <template slot-scope="{ row }">
              <el-tag type="warning">{{ row.num }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="会员信息" align="center" width="150px">
            <template slot-scope="{ row }">
              <el-popover trigger="hover" placement="top">
                <el-descriptions :column="1" border>
                  <el-descriptions-item>
                    <template slot="label">
                      卡号
                    </template>
                    {{ row.cardNo }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      手机
                    </template>
                    {{ row.mobile }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      OPENID
                    </template>
                    {{ row.openid }}
                  </el-descriptions-item>
                </el-descriptions>
                <div slot="reference" class="name-wrapper">
                  <el-tag v-if="row.cardNo" type="success">{{ row.cardNo }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="推送时间" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.pushDate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="{ row }">
              <el-tag v-if="row.ack" type="success">完成</el-tag>
              <el-tag v-else type="warning">推送中</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.createdAt | date }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作人" align="center">
            <template slot-scope="{ row }">
              <span v-if="row.createdBy">{{ row.createdBy }}</span>
              <span v-else>系统处理</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="hdlEdit(row)">详情</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>

    </u-page>

    <u-dialog title="记录详情" :show.sync="dialogFormVisible" :footer="false">
      <el-form ref="dialogForm" :model="dataForm" label-width="100px">

        <el-descriptions :column="2" border>
          <el-descriptions-item>
            <template slot="label">
              推送时间
            </template>
            {{ dataForm.pushDate }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              订单编号
            </template>
            {{ dataForm.orderNo }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              创建时间
            </template>
            {{ dataForm.createdAt | date }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              发券流水号
            </template>
            {{ dataForm.tranNo }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              劵名
            </template>
            {{ dataForm.coupon ? dataForm.coupon.name :'' }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              券号
            </template>
            <template v-if="dataForm.couponNo">
              <div v-for="(item, i) in dataForm.couponNo.split(',')" :key="i">
                {{ item }}
                <br>
              </div>
            </template>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              劵模板ID
            </template>
            {{ dataForm.templateId }}
          </el-descriptions-item>

          <el-descriptions-item v-if="dataForm.type === 0">
            <template slot="label">
              卡号
            </template>
            {{ dataForm.cardNo }}
          </el-descriptions-item>

          <el-descriptions-item v-if="dataForm.type === 0">
            <template slot="label">
              OPENID
            </template>
            {{ dataForm.openid }}
          </el-descriptions-item>

          <el-descriptions-item v-if="dataForm.type === 0">
            <template slot="label">
              手机号
            </template>
            {{ dataForm.mobile }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              操作人
            </template>
            {{ dataForm.createdBy===''? '系统处理':dataForm.createdBy }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              推送类型
            </template>
            <el-tag v-if="dataForm.type === 0" type="success">手动发放</el-tag>
            <el-tag v-if="dataForm.type === 1" type="success">扫码领取</el-tag>
            <el-tag v-if="dataForm.type === 2" type="success">消费领取</el-tag>
            <el-tag v-if="dataForm.type === 3" type="success">线上活动</el-tag>
            <el-tag v-if="dataForm.type === 4" type="success">升级权益</el-tag>
            <el-tag v-if="dataForm.type === 5" type="success">会员权益</el-tag>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              发劵状态
            </template>
            <el-tag v-if="dataForm.ack" type="success">推送成功</el-tag>
            <el-tag v-else type="warning">推送中</el-tag>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              异常订单号
            </template>
            <el-tag v-if="dataForm.oldOrderNo" type="warning">{{ dataForm.oldOrderNo }}</el-tag>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              备注
            </template>
            {{ dataForm.note }}
          </el-descriptions-item>

        </el-descriptions>

      </el-form>
    </u-dialog>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      api: this.$u.api.MarketCouponLog,
      list: [],
      listLoading: false,
      listOptions: {
        mutiSelect: false, // boolean 是否多选
        stripe: true // boolean 斑马纹
      },
      listQuery: {
        pageNumber: 1,
        pageSize: 10,
        totalCount: 1,
        couponName: '',
        beginTime: '',
        endTime: '',
        cardNo: '',
        type: '',
        ack: '',
        createdBy: ''
      },
      searchDate: [],
      dialogFormVisible: false,
      dataForm: {}

    }
  },
  methods: {
    // 初始化数据
    getList() {
      this.listLoading = true
      if (this.searchDate) {
        this.listQuery.beginTime = this.searchDate[0]
        this.listQuery.endTime = this.searchDate[1]
      } else {
        this.listQuery.beginTime = ''
        this.listQuery.endTime = ''
      }
      this.hdlList()
    },
    // 搜索事件
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    // 导出数据
    handleDownload() {
      // 复制值
      const list = this.$u.deepClone(this.list)
      // 业务数据处理
      list.forEach(item => {
        this.$set(item, 'memberInfo', item.cardNo + '/' + item.mobile + '/' + item.openid)
        this.$set(item, 'couponName', item.coupon ? item.coupon.name : '')
        this.$set(item, 'createdAt', item.createdAt ? this.$u.timeFormat(item.createdAt) : '')
        this.$set(item, 'type', item.type === 0 ? '手动发放' : item.type === 1 ? '扫码领取' : item.type === 2 ? '消费领取' : item.type === 3 ? '线上活动' : item.type === 4 ? '升级权益' : item.type === 5 ? '会员权益' : '')
        this.$set(item, 'ack', item.ack ? '完成' : '推送中')
        this.$set(item, 'createdBy', item.createdBy ? item.createdBy : '系统处理')
      })

      console.log(list)
      // 表头&表数据
      const tHeader = ['发放类型', '订单号', '发券流水号', '券号', '劵名', '数量', '会员信息', '推送时间', '状态', '创建时间', '操作人', '异常订单号', '备注']
      const filterVal = ['type', 'orderNo', 'tranNo', 'couponNo', 'couponName', 'num', 'memberInfo', 'pushDate', 'ack', 'createdAt', 'createdBy', 'oldOrderNo', 'note']
      const data = list.map(v => filterVal.map(j => { return v[j] }))
      this.$u.exports.excel('发劵记录', tHeader, data)
    }
  }
}
</script>

